<template>
  <view class="comment-container" :style="{ bottom: bottom + 'px' }">
    <uni-easyinput
      v-model="value"
      type="textarea"
      placeholder="说点什么..."
      :maxlength="50"
      :inputBorder="false"
    />
    <button
      class="commit"
      type="primary"
      :disabled="!value"
      size="mini"
      @click="onBtnClick"
    >
      发送
    </button>
  </view>
</template>

<script>
import { userArticleComment } from "api/user";
export default {
  name: "article-comment-commit",
  props: {
    articleId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      value: "",
      bottom: 0,
    };
  },
  methods: {
    /**
     * 发送按钮
     */
    async onBtnClick() {
      // 展示加载
      uni.showLoading({
        title: "加载中",
      });
      const { data: res } = await userArticleComment({
        articleId: this.articleId,
        content: this.value,
      });
      uni.showToast({
        title: "发布成功",
        icon: "success",
      });
      // 关闭popup
      this.$emit("onSendSuccess", res);
    },
  },
  created() {
    // 检测软键盘的变化
    uni.onKeyboardHeightChange(({ height }) => {
      this.bottom = height;
    });
  },
};
</script>

<style lang="scss" scoped>
.comment-container {
  background-color: #fff;
  text-align: right;
  padding: 12px;
  position: relative;
}
</style>
